
<template>
  <el-drawer :title="title" v-model="isShow" direction="rtl" size="45%" :before-close="closeDrawer" :show-close="true">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" :inline="false" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属小区" prop="community_code">
            <el-select style="width: 390px;" v-model="formData.community_code" placeholder="请选择" clearable
              @change="communityChange">
              <el-option v-for="item in CommunityAllList" :key="item.code" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属栋数" prop="building_code">
            <el-select style="width: 390px;" v-model="formData.building_code" placeholder="请选择" clearable
              @change="changeBuilding">
              <el-option v-for="item in buildingList" :key="item.code" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属房产" prop="house_code">
            <el-select style="width: 390px;" v-model="formData.house_code" placeholder="请选择" clearable>
              <el-option v-for="item in houseList" :key="item.code" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成员姓名" prop="name">
            <el-input style="width: 390px;" v-model="formData.name" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="身份证号" prop="identity_id">
            <el-input style="width: 390px;" v-model="formData.identity_id" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth">
            <el-input style="width: 390px;" v-model="formData.birth" placeholder="请输入" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系方式" prop="tel">
            <el-input style="width: 390px;" v-model="formData.tel" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="occupation">
            <el-input style="width: 390px;" v-model="formData.occupation" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="gender" label="性别">
            <el-radio-group v-model="formData.gender">
              <el-radio v-for="(item, index) in genderList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="owner_type" label="成员类型">
            <el-radio-group v-model="formData.owner_type">
              <el-radio v-for="(item, index) in useMemberList" :key="index" :label="item.value">{{ item.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成员照片" prop="photo">
            <upImg v-model="formData.photo" :type="'member'" :limit="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="closeDrawer">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { computed, ref, nextTick } from "vue";
import {
  useGenderState,
  useMemberStatus,
  useCommunityAllList,
} from "@/hooks/hooks";
import {
  editMemberApi,
  addMemberApi,
  useHouseListapi,
  buildingListApi,
  getMemberApi,
} from "@/api/owners";
import upImg from '@/components/ZXSimg/index'
import { ElMessage } from "element-plus";

const props = defineProps({
  communityList: {
    type: Array,
    default: [],
  },
});

// ==============
// 男女
const genderList = useGenderState(false);
// 业主状态
const useMemberList = useMemberStatus();
// 小区名称
const CommunityAllList = useCommunityAllList();

const isShow = ref(false);
const buildingList = ref([]);
const houseList = ref([]);

const defaultFormData = () => ({
  birth: "",
  building_code: null,
  community_code: "",
  gender: 1,
  house_code: "",
  identity_id: "",
  name: "",
  occupation: "",
  owner_type: 1,
  photo: "",
  remark: "",
  tel: "",
});

const formData = ref(defaultFormData());
const formRules = {
  community_code: [
    {
      required: true,
      message: "所属小区编号不可为空",
      trigger: "change",
    },
  ],
  building_code: [
    {
      required: true,
      message: "所属栋数编号不可为空",
      trigger: "change",
    },
  ],
  house_code: [
    {
      required: true,
      message: "房产编号不可为空",
      trigger: "change",
    },
  ],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  gender: [{ required: true, message: "请选择", trigger: "blur" }],
  owner_type: [{ required: true, message: "请选择", trigger: "blur" }],
};

const title = computed(() => {
  return formData.value.id ? "修改人员信息" : "新增人员信息";
});

// 小区栋关联
const communityChange = async (val) => {
  formData.value.building_code = null;
  formData.value.house_code = null;
  const { data } = await buildingListApi(val);
  buildingList.value = data;
  console.log({ data });
};

// 栋房子关联
const changeBuilding = async (value) => {
  try {
    if (value) {
      formData.value.house_code = null;
      const { data } = await useHouseListapi(value);
      houseList.value = data;
      console.log(houseList.value);
    } else {
      formData.value.building_code = null;
      formData.value.house_code = null;
      houseList.value = [];
    }
    // console.log(houseList.value);
  } catch (error) {
    console.log(error);
  }
};

// 关闭
const closeDrawer = async () => {
  await nextTick();
  formData.value = defaultFormData();
  formRef.value.resetFields();
  isShow.value = false;
};

// 提交
const formRef = ref();
const emit = defineEmits(["updateList"]);

// 回显
const replyData = async (id) => {
  const res = await getMemberApi(id);
  formData.value = res.data;
  console.log(res);
  const { data } = await buildingListApi(res.data.community_code);
  const { data2 } = await useHouseListapi(res.data.building_code);
  buildingList.value = data;
  houseList.value = data2;
  // 文字回显整理
  isShow.value = true;
};

// 提交
const onSubmit = async () => {
  try {
    await formRef.value.validate();
    formData.value.id
      ? await editMemberApi(toRaw(formData.value))
      : await addMemberApi(toRaw(formData.value));
    ElMessage.success(formData.value.id ? "修改成功" : "添加成功");
    emit("updateList");
    closeDrawer();
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  isShow,
  replyData,
});
</script>

<style lang="scss" scoped></style>
